<template>
		<div class="main">
			<div class="city">
				<label @click="btn()">{{cityName}}</label>
				<i class="iconfont" @click="btn()">&#xe63c;</i>
				<!-- 搜索框 -->
				<form class="search">
					<i class="iconfont">&#xe61f;</i>
					<input type="text" placeholder="国内秋色盘点大全" />
				</form>
			</div>
			<div class="Hot">
				<ul>
					<li v-for="item in menus" :key="item.id">{{item.name}}</li>
				</ul>
			</div>
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<!-- 主体的滑动区 -->
				<ul class="swiper-wrapper">
					<li class="swiper-slide"  v-for="item in list" :key="item.id">
						<img :src="item.imgURL" >
					</li>
					<!--分页器。如果放置在swiper外面，需要自定义样式。-->
				</ul>
				<div class="swiper-pagination"></div>
			</div>
		</div>
		
</template>

<script>
	
	// 引入vue周期函数
	import{onMounted} from 'vue';
	
	import {mapState} from 'vuex';
	// 2.引入Swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Banner',
		
		data(){
			return{
				menus : [
						{ id:1 , url:'/' , name:'热搜' },
						{ id:2 , url:'/' , name:'赏银杏' },
						{ id:3 , url:'/' , name:'赏枫叶' },
						{ id:4 , url:'/' , name:'秋日骑行' },
						{ id:5 , url:'/' , name:'温泉滑雪' },
					],
				list:[
					{id:1,imgURL:require('@/assets/img/1.jpg')},
					{id:2,imgURL:require('@/assets/img/2.jpg')},
					{id:3,imgURL:require('@/assets/img/3.jpg')},
					{id:4,imgURL:require('@/assets/img/4.jpg')},
					{id:5,imgURL:require('@/assets/img/5.jpg')},
					{id:6,imgURL:require('@/assets/img/6.jpg')},
					{id:7,imgURL:require('@/assets/img/7.jpg')},
					{id:8,imgURL:require('@/assets/img/8.jpg')},
				],	
			}
		},
		computed:{
			// 接收state内部的cityName的变量
			...mapState(['cityName'])
		},
		methods:{
			btn(){
				this.$router.push('/city')
			}
		},
		// 4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted( ()=>{ 
				new Swiper( '.banner-swiper' , {
					// 循环播放
					loop:true,
					//设置分页器效果
					pagination:{
						el:'.swiper-pagination'
					},
					//设置播放项：时间，不停止，手指经过不暂停自动
					autoplay:{
						delay:3000,
						stopOnLastSlide:false,
						disableOnInteraction:true
					}
				} )
			} )
		}
	}
	
</script>

<style scoped>
	.main{
		padding-top: 0.2rem;
		position: relative;
		width: 100%;
		height: 4.9rem;
		background-color: #ffdd40;
	}
	.main .city label{
		width: 1.2rem;
		height: 0.9rem;
		overflow: hidden;
		text-overflow: ellipsis;  /* 省略号 */
		white-space: nowrap; /* 禁止换行 */
	}
	.main .city{
		font-weight: bold;
		display: flex;
		overflow: hidden;
		font-size: 0.4rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;	
	}
	.main .city i{
		vertical-align: middle;
		padding-left: 0.1rem;
		
	}
	.main .search{
		margin-left: 0.2rem;
		background-color: white;
		width: 80%;
		border-radius: 0.5rem;
	}
	.main .search i{
		padding-left: 0.2rem;
	}
	.main .search input{
		border: none;
		width: 80%;
		text-indent: 1em;
		outline: medium;
	}
	.Hot{
		padding-top: 0.1rem;
		width: 100%;
		height: 0.8rem;
		padding-bottom: 0.15rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.Hot ul{
		display: flex;
		width: 93%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.Hot ul li:first-child{
		width: 9%;
		background-color: #ffdd40;
	}
	.Hot ul li{
		margin-top: 0.1rem;
		width: 19%;
		height: 0.55rem;
		line-height: 0.55rem;
		text-align: center;
		font-size: 0.37rem;
		border-radius: 27%;
		background-color: #ffeea0;
	}
	/* 轮播图区域 */
	.banner-swiper{
		width: 94%;
		border-radius: 0.3rem;
		height: 4.1rem;
	}
	.banner-swiper ul li img{
		width: 100%;
		border-radius: 0.3rem;
		height: 100%;
	}
	/* 穿透 */
	.swiper-pagination >>> .swiper-pagination-bullet-active{
		background-color: yellow;
		z-index:999;
	}
</style>
